<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .fa {
        width: 1180px;
        height: 100px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    #fa {
        width: 1180px;
        height: 200px;
        margin: auto;
    }

    .son {
        width: 300px;
        height: 100px;
        background: pink;
        font-size: 25px;
        line-height: 100px;
        text-align: center;
    }

    .fa div:nth-child(1) {
        background: skyblue;
    }

    #son {
        width: 1180px;
        height: 200px;
        line-height: 200px;
        font-size: 50px;
        text-align: center;
        background: skyblue;
        display: none;
    }

    #fa div:nth-child(1) {
        display: block;
    }
</style>

<body>
    <div class="fa">

    </div>
    <div id="fa">

    </div>

</body>
<script>
    let fa = document.querySelector(".fa");
    let fat = document.querySelector("#fa");
    fa.innerHTML = `
    <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    `;
    fat.innerHTML = `
    <div id="son">1</div>
        <div id="son">2</div>
        <div id="son">3</div>
    `;
    let son = document.querySelectorAll(".son");
    let son_ = document.querySelectorAll("#son");
    for (let i = 0; i < son.length; i++) {
        son[i].onclick = () =>{
            for (let j = 0; j < son.length; j++) {
                son_[j].style.display = "none";
                son[j].style.background = "pink";
            }
            son_[i].style.display = "block";
            son[i].style.background = "skyblue";
        };
    };
</script>

</html>